<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#box{
		width: 600px;
		height: 400px;
		border: 5px solid blue;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById('btn');//抓到按钮
		var box = document.getElementById('box');
		var hs = box.getElementsByTagName('h3');//抓到box里面所有的h3标签
		var title = document.getElementById('title');

		btn.onclick = function(){
			// 第一步：创建空标签
			var newObj = document.createElement('h3');
			// 第二步：给新标签加内容
			newObj.innerHTML = '我是新来的，请多多关照！';
			// 第三步：给新标签加属性
			newObj.setAttribute('class','hd');
			// 第四部：将新标签追加到页面指定的位置
			// box.appendChild(newObj);

			// 将元素追加到某个元素之前
			// box.insertBefore(title,hs[1]);

			// 删除标签
			// box.removeChild(hs[1]);

			// 标签的替换
			// box.replaceChild(title,hs[1]);

			// 标签的复制
			var obj = title.cloneNode(true);
			box.appendChild(obj);//将复制出来的新节点追加到box里面
		}
	}
</script>
</head>

<body>

<input type="button" value="点我增加一个新标签" id="btn" />
<br /><br />

<h1 id="title">我是h1标签</h1>
<div id="box">
	<h3>后盾网 人人做后盾0</h3>
	<h3>后盾网 人人做后盾1</h3>
	<h3>后盾网 人人做后盾2</h3>
	<!-- <h3 class="abc">后盾网 人人做后盾</h3> -->
</div>


</body>
</html>
